<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no" />
		<title>微店首页</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
	</head>
	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper transparent">
			<div class="mui-scroll">
				<h3 class="custom-title">微店推荐</h3>
				<div id="TopVShop">
					
				</div>
				<h3 class="custom-title">热门微店 <div id="moreVshop" class="moreVshop">所有微店<span class="mui-icon mui-icon-forward" ></span></div></h3>
				<div id="HotShop">
					
				</div>
			</div>
		</div>
		<div class="empty-show" id="emptyShow" style="display: none;"><h4>网络不给力，请检查网络！</h4><button id="fireReloadWv" class="mui-btn mui-btn-negative">重新加载</button></div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<!--<script src="../js/delayimg.min.js"></script>-->
		<script>
			var isnodata = false,
				page = 1,
				imgWidth,
				imgLen=0,
				oldImgLen,
				loadPage,
				flag=false;
			document.addEventListener('updateData', function() {
				if(!flag){
					mui.init({
						pullRefresh : {
						    container:'#pullrefresh',
						    deceleration:0.0006,
						    up : {
							    contentrefresh : "正在加载...",
							    contentnomore:'<button type="button" style="top:4px;border-radius:14px;" class="mui-btn mui-btn-danger" id="SelectVshopHome" >查看全部微店</button>',
							    callback :function(){
							    	
							      	var self=this;
							      	setTimeout(function() {
								      	if (!isnodata) {
								      		page++;
									        mui.ajax(URL+'api/VShopHome/GetVShopHome?pageNo='+page+'&pageSize=10',{
												dataType:'json',
												type:'get',
												timeout:10000,
												success:function(data){
//													console.log(data)
													if(data.Success=='true'){
									                    var html = '';
									                    oldImgLen=imgLen;
									                    for(var i=0; i<data.HotShop.length; i++){
//									                    	console.log(data.HotShop[i].ShopLogo)
															html+='<div><div class="vshop-info">'+
																'<a class="vshop-url vshop-img" data-vshopid="'+data.HotShop[i].VShopId+'"><img src="'+data.HotShop[i].ShopLogo+'"  /></a>'+
																'<div class="vshop-info-text">';
																	if(data.HotShop[i].IsFavorite)
																		html+='<i data-shopid="'+data.HotShop[i].ShopId+'" class="addFavoriteShop iconfont icon-xin red"></i>';
																	else
																		html+='<i data-shopid="'+data.HotShop[i].ShopId+'" class="addFavoriteShop iconfont icon-xin"></i>';
																html+='</div></div>';
															
															imgLen+=data.HotShop[i].Products.length;
															if(data.HotShop[i].Products.length>0){
																productList='';
																for(var j=0; j<data.HotShop[i].Products.length; j++){
																	productList+='<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
									                        			'<div class="vshop-product-box">'+
																			'<a class="goods-url" data-id="'+data.HotShop[i].Products[j].Id+'">'+
																				'<div class="p-img"><img src="'+data.HotShop[i].Products[j].ImageUrl+'"/></div>'+
																				'<div class="mui-media-body">'+data.HotShop[i].Products[j].Name+'</div>'+
																				'<p class="vshop-product-price"><span>¥ '+data.HotShop[i].Products[j].SalePrice+'</span></p>'+
																			'</a>'+
																		'</div>'+
												            		'</li>';
																}
																html+='<ul class="mui-table-view mui-grid-view mui-clearfix vshop-product">'+productList+'</ul></div>';
															}else{
																html+='</div>'
															}
														}
									                    document.getElementById('HotShop').insertAdjacentHTML('beforeend',html);
									                    for(var i=oldImgLen; i<imgLen; i++){
									                    	document.getElementsByClassName('p-img')[i].style.height= imgWidth+'px';
									                    }
//									                    delayimg.render();
									                    if (data.Total<=page*10) {isnodata = true;}
														self.endPullupToRefresh(isnodata);
								      					
													}
												},
												error:function(xhr,type,errorThrown){
													plus.nativeUI.toast('请求失败，请检查网络')
												}
											});
									    }else{
									    	self.endPullupToRefresh(isnodata);
									    }
								    },1500);   
						    	 
							    }
						    },
						    down : {
								contentdown : "下拉可以刷新",
								contentover : "释放立即刷新",
								contentrefresh : "正在刷新...",
								callback :function(){
									setTimeout(function(){
										page = 1;
										isnodata = false;
										imgLen=0;
										loadPage();
										mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
										mui('#pullrefresh').pullRefresh().refresh(true);
									},300)
								}
						    }
						}
					});
					  
					mui.plusReady(function() {
						
						var w=plus.nativeUI.showWaiting('',{padlock:true});
						loadPage=function(){
							mui.ajax(URL+'api/VShopHome/GetVShopHome?pageNo=1&pageSize=10',{
								dataType:'json',
								type:'get',
								timeout:10000,
								success:function(data){
//									console.log(data)
									if(data.Success=='true'){
										var topVshop='',
											productList,
											hotShop='';
										if(data.TopVShop.Success=='true'){
											topVshop+='<div><div class="vshop-info">'+
												'<a class="vshop-url vshop-img" data-vshopid="'+data.TopVShop.VShopId+'"><img src="'+data.TopVShop.ShopLogo+'" /></a>'+
												'<div class="vshop-info-text">';
													if(data.TopVShop.IsFavorite)
														topVshop+='<i data-shopid="'+data.TopVShop.ShopId+'" class="addFavoriteShop iconfont icon-xin red"></i></div>';
													else
														topVshop+='<i data-shopid="'+data.TopVShop.ShopId+'" class="addFavoriteShop iconfont icon-xin"></i></div>';
											   topVshop+='</div>';
											if(data.TopVShop.Products.length>0){
												imgLen+=data.TopVShop.Products.length;
												productList='';
												for(var i=0; i<data.TopVShop.Products.length; i++){
													productList+='<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
					                        			'<div class="vshop-product-box">'+
															'<a class="goods-url" data-id="'+data.TopVShop.Products[i].Id+'">'+
																'<div class="p-img"><img src="'+data.TopVShop.Products[i].ImageUrl+'"/></div>'+
																'<div class="mui-media-body">'+data.TopVShop.Products[i].Name+'</div>'+
																'<p class="vshop-product-price"><span>¥ '+data.TopVShop.Products[i].SalePrice+'</span></p>'+
															'</a>'+
														'</div>'+
								            		'</li>';
												}
												topVshop+='<ul class="mui-table-view mui-grid-view mui-clearfix vshop-product">'+productList+'</ul></div>';
											}else{
												topVshop+='</div>'
											}
											document.getElementById('TopVShop').innerHTML=topVshop;
										}
										if (data.Total<=10) {isnodata = true;}
										if(data.Total>0){
											for(var i=0; i<data.HotShop.length; i++){
												hotShop+='<div><div class="vshop-info">'+
													'<a class="vshop-url vshop-img" data-vshopid="'+data.HotShop[i].VShopId+'"><img src="'+data.HotShop[i].ShopLogo+'"  /></a>'+
													'<div class="vshop-info-text">';
														if(data.HotShop[i].IsFavorite)
															hotShop+='<i data-shopid="'+data.HotShop[i].ShopId+'" class="addFavoriteShop iconfont icon-xin red"></i>';
														else
															hotShop+='<i data-shopid="'+data.HotShop[i].ShopId+'" class="addFavoriteShop iconfont icon-xin"></i>';
													hotShop+='</div></div>';
												imgLen+=data.HotShop[i].Products.length;
												if(data.HotShop[i].Products.length>0){
													productList='';
													for(var j=0; j<data.HotShop[i].Products.length; j++){
														productList+='<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
						                        			'<div class="vshop-product-box">'+
																'<a class="goods-url" data-id="'+data.HotShop[i].Products[j].Id+'">'+
																	'<div class="p-img"><img src="'+data.HotShop[i].Products[j].ImageUrl+'"/></b></div>'+
																	'<div class="mui-media-body">'+data.HotShop[i].Products[j].Name+'</div>'+
																	'<p class="vshop-product-price"><span>¥ '+data.HotShop[i].Products[j].SalePrice+'</span></p>'+
																'</a>'+
															'</div>'+
									            		'</li>';
													}
													hotShop+='<ul class="mui-table-view mui-grid-view mui-clearfix vshop-product">'+productList+'</ul></div>';
												}else{
													hotShop+='</div>'
												}
											}
											document.getElementById('HotShop').innerHTML=hotShop;
										}
//										imgWidth = document.getElementsByClassName('p-img')[0].offsetWidth;
//					                    for(var i=0; i<imgLen; i++){
//					                    	document.getElementsByClassName('p-img')[i].style.height= imgWidth+'px';
//					                    }
//					                    delayimg.init();
					                    flag=true;
										if(w)
											w.close();
					                    document.getElementById('pullrefresh').style.display='block';
										document.getElementById('emptyShow').style.display='none';
										document.getElementById('pullrefresh').className='mui-content mui-scroll-wrapper';
									}
								},
								error:function(xhr,type,errorThrown){
									flag=false;
									document.getElementById('pullrefresh').style.display='none';
									document.getElementById('emptyShow').style.display='block';
								}
							});
						}
						loadPage();
						
						
						mui('body').on('tap', '#fireReloadWv', function() {
							document.getElementById('emptyShow').style.display='none';
							var w=plus.nativeUI.showWaiting('',{padlock:true});
							setTimeout(function(){
								page = 1;
								isnodata = false;
								imgLen=0;
								loadPage();
								mui('#pullrefresh').pullRefresh().refresh(true);
							},300)
						});
						
						//添加列表项的点击事件
						mui('.mui-content').on('tap', '.goods-url', function() {
							var id = this.getAttribute('data-id');
							showProduct(id,'/');
						});
							
						mui('.mui-content').on('tap', '.vshop-url', function() {
							var vshopid = this.getAttribute('data-vshopid');
							showVshop(vshopid);
						});
						
						
						mui('.mui-content').on('tap', '.addFavoriteShop', function() {
							var _this=this;
							if(app.isLogin()){
								var w=plus.nativeUI.showWaiting('',{padlock:true});
								var shopid=_this.getAttribute('data-shopid');
								mui.ajax(URL+'api/VShop/PostAddFavoriteShop',{
									data:JSON.stringify({shopId:shopid}),
									dataType:'json',
									contentType:'application/json',
									type:'POST',
									timeout:10000,
									success:function(data){
										w.close();
										if(data.Success=="true"){
											plus.nativeUI.toast(data.Msg);
											if(_this.className.indexOf('red')>=0)
												_this.className=_this.className.replace(' red','')
											else
												_this.className=_this.className+' red';
										}else{
											plus.nativeUI.toast('关注店铺失败');
										}
									},
									error:function(xhr,type,errorThrown){
										w.close();
										plus.nativeUI.toast('关注失败，请检查网络')
									}
								});
							}else{
								showLogin('/');
							}
							
						});
						
						mui('.mui-content').on('tap', '#moreVshop,#SelectVshopHome', function() {
							//打开微店列表
							mui.openWindow({
								id:'vshop-list.html',
							  	url:'vshop-list.html',
								show: {
									autoShow:true,
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}
							});
						});
					});
					
				}
			});
		</script>
	</body>

</html>